<template>
<div class="div1">
     <button :class="{ active: activeButton === 'button1' }" @click="setActive('button1')">个人</button>  
     <button :class="{ active: activeButton === 'button2' }" @click="setActive('button2')" id="but1">企业</button> 
</div>
<div><input type="text" placeholder="审核状态" class="input1"><input type="text" placeholder="签约人" class="input1">
<input type="text" placeholder="手机号" class="input1">
    <button class="but1"> 查询</button>  <button class="but1">重置</button> 
    <button id="bute">创建合同</button>
</div>
<div>
    <table>
        <tr><td><input type="checkbox" name="check"></td><td>合同编号</td><td>合同名称</td><td>签约日期</td>
        <td>签订人</td><td>身份证号</td><td>截至日期</td><td>合同状态</td><td>更新时间</td><td>操作</td></tr>
        <tr><td><input type="checkbox" name="check"></td><td>345678</td><td>租房合同</td><td>2024-03-09</td>
        <td>刘瑞</td><td>2836376378272</td><td>2028-10-13</td><td>已签订</td><td>2024-03-10</td>
        <td><button class="but2"> 查看</button><button class="but2">编辑</button><button class="but2">删除</button></td></tr>
        
    </table>
</div>
    
</template>
<script>
    import { ref } from 'vue';  
  
export default {  
  setup() {  
    // 使用ref创建一个响应式的变量来跟踪哪个按钮是激活的  
    const activeButton = ref('');  
  
    // 定义一个方法来设置激活的按钮  
    const setActive = (buttonId) => {  
      activeButton.value = buttonId;  
    };  
  
    // 返回给模板的响应式变量和方法  
    return {  
      activeButton,  
      setActive,  
    };  
  },  
}; 
</script>
<style>
   .div1{
    margin-left:20px ;
   }
   .active {  
        background-color:aqua; /* 激活状态的样式 */
    }
    #but1{
        margin-left: -1px;
    }  
    .input1{
        margin-top: 20px;
        margin-left: 10px;
    }
    .but1{
        margin-left: 10px;
    }
    #bute{
        margin-left: 900px;
    }
     .but2{
        border: none;
        color:blue;
    }
    .but2:hover{
       
        color:deepskyblue;
    }
    td{
        width: 140px;
        height: 50px;
        text-align: left;
    }
</style>